<template>
  <div>
    <ul>
      <li v-for="(item, index) of menus" :key="index">
        <div v-if="item.children">
          <div>{{ item.title }}</div>
          <menu-item :menus="item.children"></menu-item>
        </div>
        <ul v-else>
          <li>{{ item.title }}</li>
        </ul>
      </li>
    </ul>
  </div>
</template>

<script>
// 使用递归组件必须在子组件中添加name属性，且名字为组件的名称
export default {
  name: 'MenuItem',
  props: {
    menus: Array
  }
}
</script>
